<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <script src="../js/vue.js"></script>
    </head>
    <body>
        <div id="demo">
            <form action="">
                <p>用户名: <input type="text" name="" v-model="username"></p>
                <p>密码： <input type="password" name="" v-model="password"></p>
                <p>性别: 
                    <input type="radio" name="gender" value="女" v-model="sex"> 女 
                    <input type="radio" name="gender" value="男" v-model="sex"> 男
                </p>
                <p>城市: 
                    <select name="" v-model="city">
                        <option value="北京">北京</option>
                        <option value="深圳">深圳</option>
                        <option value="上海">上海</option>
                    </select>
                </p>
                <p>
                    爱好：
                    <input type="checkbox" name="hobby123" value="1" v-model="hobby"> 打台球
                    <input type="checkbox" name="hobby123" value="2" v-model="hobby"> 弹玻璃球
                    <input type="checkbox" name="hobby123" value="3" v-model="hobby"> 踢足球
                    <input type="checkbox" name="hobby123" value="4" v-model="hobby"> 打篮球
                </p>
            </form>
        </div>
        <script>
            new Vue({
                el:'#demo',
                data: {
                    username:'atguigu',
                    password:'123123',
                    sex:'女',
                    city:'北京',
                    hobby:['1','2','3']
                }
            })
        </script>
    </body>
</html>